var that 
class Tab{
  constructor(el) {
    that = this
    this.box = document.querySelector(el)

    this.ul = this.box.querySelector('.fiststnav ul')
    this.tabscon = this.box.querySelector('.tabscon')
  
    this.tabAdd = this.box.querySelector('.tabadd')

    this.init()
    
  }

  updateNode() {
    this.lis = this.box.querySelectorAll('li')
    this.iconGuanbi = this.box.querySelectorAll('.icon-guanbi')
    this.sections = this.box.querySelectorAll('section')
    this.spans = this.box.querySelectorAll('.fiststnav li span:first-child')
  }
  
  // 因为以后功能要写一大坨 ，所以专门抽取了一个 init方法
  init() {
    this.updateNode()

    // 给添加按钮 注册事件
    this.tabAdd.onclick = this.addTab

    for(var i = 0; i < this.lis.length; i++) {
      // 因为我门要有切换tab的 功能，所以给每一个li注册了事件
      this.lis[i].onclick = this.toggleTab
      // 因为我们需要 点击x关闭， 所以 我们注册事件
      this.iconGuanbi[i].onclick = this.removeTab
      // 给 span 注册双击事件
      this.spans[i].ondblclick = this.editTab
      this.sections[i].ondblclick = this.editTab
      this.lis[i].index = i
    }
  }
  
  editTab() {
    var value = this.innerHTML // 获取 span 的 内容
    // 此处的 this是 谁调用了 editTab，this就是谁
    // 我们是被 span的人 调用的， 所以 这个this 就是 span
    this.innerHTML = `<input type="text" value='${value}'/>`

    // 获取 input元素
    var input = this.children[0]
    // 给 input设置选中
    input.select()

    // 给 input注册 失去焦点事件
    input.onblur = function() {
      // this 是 函数被谁调 ，指向谁
      // 而当前这个this 所在的 函数 是被 input调用的
      // 所以 我们此处的 this 是 input
      this.parentNode.innerHTML = this.value
    }

    input.onkeydown = function(e) {
      if(e.keyCode == 13) {
        this.blur()
      }
    }
  }

  clearActive() {
    // 清楚了所有高亮 
    for(var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }

  // 切换tab的一个事件
  toggleTab() {
    // 因为要 让别人高亮。所以想让所有人没有高亮，再去给自己添加高亮
    that.clearActive()

    // 让自己高亮
    this.className = 'liactive'
    // 让自己 对应的 section高亮
    that.sections[this.index].className = 'conactive'
  }

  removeTab(e) {
    e.stopPropagation()

    // 获取当前惦记的是第几个 li
    var index = this.parentNode.index  // 0

    // 将对应的 li和 section 删除
    that.lis[index].remove()
    that.sections[index].remove()

    // 如果 我们删除了元素，页面上仍然有人是选中的，则说明，我们删除的人不是高亮的
    // 也就没必要移动高亮，保持之前那个人的高亮就可以了
    // 根据 是否页面还存在 liacitve 这个类名，来判断
    if( document.querySelector('.liactive') ) {
      return 
    }

    // 由于我们希望 前一个人高亮
    // 所以 我们将索引 -1，那么我们就获取到了 前一个li的索引
    index--  // -1

    // 只要能获取到前一个li元素，那我们就完成点击上一个li操作，实现前一个li高亮显示
    // index >= 0 ? that.lis[index].click() : 0

    if(index >= 0) {
      that.lis[index].click() 
    }

  }

  addTab() {
    that.clearActive()

    var randomValue = Math.random()

    var li = `<li class="liactive" ><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>`
    var section = `<section class="conactive">测试 ${randomValue}</section>`

    that.ul.insertAdjacentHTML('beforeend', li)
    that.tabscon.insertAdjacentHTML('beforeend', section)

    that.init()
  }


}

var tab = new Tab('#tab')